<template>
	<view class="order-container c-container protocol-container">
		<navigator class="fixed-right" v-if='order_id' :url="'/pages/order/detail/detail?order_id='+order_id">
			<text>查看定单详情</text>
		</navigator>
		<view class="c-row-box">
			<view class="c-row-head"><view class="c-row-title">酒店协议</view></view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							协议桌数
						</view>
						<view class="col-text"><input type="digit" v-model="hotelProtocol.table_amount" @input="banquetChange" :disabled="isPreview" placeholder="请输入" /></view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							协议餐标
						</view>
						<view class="col-text"><input type="digit" v-model="hotelProtocol.table_price" @input="banquetChange" :disabled="isPreview" placeholder="请输入" /></view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">优惠金额</view>
						<view class="col-text">
							<input type="digit" v-model="hotelProtocol.banquet_discount" @input="banquetChange" :disabled="isPreview" placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							餐饮总价
						</view>
						<view class="col-text">
							<text>{{ hotelProtocol.food_totals }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他费用列表 -->
		<other-list v-if="addons.length > 0" :addons="addons" :isPreview="isPreview" @deleteOtherItem="deleteOtherItem" @editOtherList="editOtherList"></other-list>

		<!-- 定金 -->
		<earnest-info :hotelProtocol="hotelProtocol" :isPreview="isPreview" :startDate="startDate" :endDate="endDate" :exchangeType="2" @getTailMoney="getTailMoney"></earnest-info>

		<!-- 中款 -->
		<middle-info
			v-if="hotelProtocol.earnest_money"
			:isPreview="isPreview"
			:hotelProtocol="hotelProtocol"
			:startDate="startDate"
			:endDate="endDate"
			:exchangeType="2"
			@getTailMoney="getTailMoney"
		></middle-info>

		<!-- 尾款 -->
		<tail-info
			v-if="hotelProtocol.middle_money"
			:isPreview="isPreview"
			:hotelProtocol="hotelProtocol"
			:startDate="startDate"
			:endDate="endDate"
			:exchangeType="2"
			@getMiddleMoney="getMiddleMoney"
		></tail-info>

		<view class="c-row-box">
			<view class="c-row-head"><view class="c-row-title">附件信息</view></view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							协议备注
						</view>
						<view class="col-text"><textarea v-model="hotelProtocol.remark" placeholder="请输入" :disabled="isPreview" /></view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							图片列表
						</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item, index) in hotelProtocol.image" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage"></image>
								<uni-icons
									@click="deleteImageArray(index)"
									type="minus-filled"
									size="10"
									color="red"
									style="position: absolute;right:0;top: -16upx;"
									v-if="!isPreview"
								></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage" v-if="!isPreview"><image src="@/static/add.png" mode="" @click=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<divider title="审核流程" v-if="sequenceData.length > 0 || confirmList.length > 0 || confirmSteps.length > 0"></divider>
		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>
		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess
				:value="confirmList"
				:btnValue="buttons"
				:isShowBtn="options.api ? false : true"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				@resubmit="resubmits"
			></auditProcess>
		</template>
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn
				:btnValue="buttons"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				:isShowBtn="options.api ? false : true"
				@resubmit="resubmits"
				@transferSubmit="transferSubmit"
				@addOther="addOther"
			></footer-action-btn>
		</template>

		<!-- 底部栏-创建 -->
		<view class="footer-box" v-if="confirm_id == 0">
			<view class="footer-text">
				<text>协议总额：{{ hotelProtocol.pay_hotel_totals }}</text>
			</view>
			<view class="footer-action-btn">
				<button size="mini" @click="addOther">添加项目</button>
				<button size="mini" @click="submit">提交</button>
			</view>
		</view>

		<!-- 添加内容弹窗 -->
		<add-dialog
			v-if="showDialog"
			ref="addDialog"
			:addons="addons"
			:addType="addType"
			:ritualList="ritualList"
			:isLook="isLook"
			@closeDialog="closeDialog"
			@getOtherPrice="getOtherPrice"
		></add-dialog>
	</view>
</template>

<script>
import divider from '@/component/divider/divider.vue';
import stepsLook from '@/component/steps-look/steps-look.vue'; // 新版审核流程
import stepsCreate from '@/component/steps-create/steps-create.vue';
import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue'; // 底部操作按钮组
import auditProcess from '@/component/auditProcess.vue';

import addDialog from '../childComps/addDialog/addDialog.vue';
import otherList from '../childComps/otherList/otherList.vue';
import earnestInfo from '../childComps/earnestInfo/earnestInfo.vue';
import middleInfo from '../childComps/middleInfo/middleInfo.vue';
import tailInfo from '../childComps/tailInfo/tailInfo.vue';

import request from '@/utils/request.js';

export default {
	components: {
		divider,
		stepsLook,
		stepsCreate,
		footerActionBtn,
		auditProcess,

		addDialog,
		otherList,
		earnestInfo,
		middleInfo,
		tailInfo
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			options: {},
			order_id: 0,
			confirm_id: 0,
			buttons: [], // 用户所拥有的权限
			isPreview: false,
			companyList: [],
			ritualList: [],
			hotelProtocol: {
				table_amount: 0,
				table_price: 0,
				banquet_discount: 0,
				earnest_money: '', //定金收款金额
				earnest_money_date: '', //定金收款日期
				middle_money: '', //中款收款金额
				middle_money_date: '', //中款收款日期
				tail_money: '', //尾款金额
				tail_money_date: '', //尾款时间
				food_totals: 0,
				pay_hotel_totals: 0,
				remark: '',
				image: []
			},
			confirm: [], // 审核信息
			sequenceData: [], // 新版审核-创建
			confirmList: [], // 老版审核
			confirmSteps: [], // 新版审核-查看

			transferForm: {
				realname: '',
				user_id: ''
			},

			// 添加项目弹窗
			showDialog: false,
			isLook: false, // 添加项目弹窗-查看
			other_totals: 0,
			// 增项项目
			addType: [
				{
					id: 1,
					type: 'sugar',
					title: '喜糖'
				},
				{
					id: 2,
					type: 'wine',
					title: '酒水'
				},
				{
					id: 3,
					type: 'dessert',
					title: '点心'
				},
				{
					id: 4,
					type: 'led',
					title: 'LED'
				},
				{
					id: 5,
					type: 'light',
					title: '灯光'
				},
				{
					id: 6,
					type: '3d',
					title: '3D'
				},
				{
					id: 7,
					type: 'into',
					title: '进场费'
				},
				{
					id: 8,
					type: 'rite',
					title: '仪式'
				},
				{
					id: 9,
					type: 'room',
					title: '婚房'
				},
				{
					id: 10,
					type: 'part',
					title: '停车位'
				},
				{
					id: 11,
					type: 'other',
					title: '其他项目'
				}
			],
			// 其他项目费用列表
			addons: []
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad(options) {
		// 添加 从订单详情页添加子项目 包含order_id
		if (options.params) {
			this.options = JSON.parse(options.params);
			this.order_id = this.options.order_id;
			// 审核流程--创建
			this.getConfirmSequence();
		}

		// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
		if (options.lookApproval) {
			this.options = JSON.parse(options.lookApproval);
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			this.isPreview = true;
			// 审核流程--查看
			this.getConfirmList();
		}

		// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
		if (options.id) {
			this.options = options;
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			this.isPreview = true;
			// 审核流程--查看
			this.getConfirmList();
		}

		this.companyList = uni.getStorageSync('allPicker').companyList;
		this.ritualList = uni.getStorageSync('allPicker').ritualList;
	},
	methods: {
		//获取查看信息
		getDetail(e) {
			let that = this;
			request.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token: true,
				data: {
					id: e.id,
					type: e.user ? 'confirm_user' : ''
				},
				success(res) {
					if (res.code == 200) {
						that.hotelProtocol = res.data.detail.hotelProtocol;
						that.confirmList = res.data.confirmList;
						that.confirm = res.data.confirm; //代表的是当前审核的信息
						that.order_id = that.confirm.order_id;
						that.buttons = res.data.buttons;
						that.addons = res.data.detail.hotelProtocol.addons;
						//判断是否可以编辑
						that.buttons.map((item, index) => {
							if (item.id == 'update') {
								that.isPreview = false;
							}
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		// 时间选择
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 2;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},

		// 尾款收款日期
		tailDateChange(e) {
			this.hotelProtocol.tail_money_date = e.target.value;
		},

		// 获取中款金额
		getMiddleMoney() {
			let that = this;
			let pay_hotel_totals = that.hotelProtocol.pay_hotel_totals ? that.hotelProtocol.pay_hotel_totals : 0;
			let earnest_money = that.hotelProtocol.earnest_money ? that.hotelProtocol.earnest_money : 0;
			let tail_moeny = that.hotelProtocol.tail_money ? that.hotelProtocol.tail_money : 0;
			that.hotelProtocol.middle_money = (parseFloat(pay_hotel_totals) - parseFloat(earnest_money) - parseFloat(tail_moeny)).toFixed(2);
		},

		// 获取尾款金额
		getTailMoney() {
			let that = this;
			let pay_hotel_totals = that.hotelProtocol.pay_hotel_totals ? that.hotelProtocol.pay_hotel_totals : 0;
			let earnest_money = that.hotelProtocol.earnest_money ? that.hotelProtocol.earnest_money : 0;
			let middle_money = that.hotelProtocol.middle_money == '' ? 0 : that.hotelProtocol.middle_money;
			that.hotelProtocol.tail_money = (parseFloat(pay_hotel_totals) - parseFloat(earnest_money) - parseFloat(middle_money)).toFixed(2);
		},

		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			console.log(that.options);
			request.request({
				url: '/api/order.audit/getAuditProcess',
				showLoading: true,
				token: true,
				data: Object.assign(
					{
						order_id: that.order_id
					},
					{
						audit_type: 'protocol'
					},
					{
						company_id: 0
					}
				),
				success(res) {
					if (res.code == 200) {
						that.sequenceData = res.data.process;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},

		// 协议信息发生变化
		banquetChange() {
			let that = this;
			that.hotelProtocol.food_totals = (
				parseFloat(that.hotelProtocol.table_amount === '' ? 0 : that.hotelProtocol.table_amount) *
					parseFloat(that.hotelProtocol.table_price === '' ? 0 : that.hotelProtocol.table_price) -
				parseFloat(that.hotelProtocol.banquet_discount === '' ? 0 : that.hotelProtocol.banquet_discount)
			).toFixed(2);
			that.getOrderTotals();
		},

		// 添加其他售卖信息
		addOther() {
			this.showDialog = true;
		},

		// 关闭弹框
		closeDialog() {
			this.showDialog = false;
			this.isLook = false;
		},

		// 删除已添加的其他费用
		deleteOtherItem(index) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该项？',
				success(res) {
					if (res.confirm) {
						that.addType.unshift(that.addons[index]);
						that.addons.splice(index, 1);
						that.getOtherPrice(that.addons);
					}
				}
			});
		},

		// 查看信息
		editOtherList(data) {
			this.isLook = true;
			this.showDialog = true;
			this.$nextTick(function() {
				this.$refs['addDialog'].showDialog(data);
			});
		},

		// 获取其他费用
		getOtherPrice(data) {
			let otherPirce = 0;
			let len = data.length;
			for (let i = 0; i < len; i++) {
				otherPirce = otherPirce + parseFloat(data[i]['total']);
			}
			this.other_totals = otherPirce;
			this.getOrderTotals();
			this.getTailMoney();
		},

		// 获取协议总额
		getOrderTotals() {
			let that = this;
			let food_totals = that.hotelProtocol.food_totals ? that.hotelProtocol.food_totals : 0;
			that.hotelProtocol.pay_hotel_totals = (parseFloat(food_totals) + parseFloat(that.other_totals)).toFixed(2);
			that.getTailMoney();
		},

		//选择图片
		chooseImage() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					that.upImg(res.tempFiles);
				}
			});
		},

		//上传图片
		upImg(data) {
			let that = this;
			uni.showLoading({title:'上传中',mask:true});
			var i = data.i ? data.i : 0; //当前上传的哪张图片
			var success = data.success ? data.success : 0; //上传成功的个数
			var fail = data.fail ? data.fail : 0; //上传失败的个数
			uni.uploadFile({
				url: request.http + '/h5/order.upload/doupload',
				filePath: data[i].path,
				header: {},
				name: 'file',
				formData: {
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				},
				success: res => {
					if (JSON.parse(res.data).msg == '上传成功') {
						success++; //图片上传成功，图片上传成功的变量+1
						uni.hideLoading();
					}
					that.hotelProtocol.image.push(JSON.parse(res.data).data.url);
				},
				fail: () => {
					fail++; //图片上传失败，图片上传失败的变量+1
				},
				complete: () => {
					i++; //这个图片执行完上传后，开始上传下一张
					if (i == data.length) {
						//当图片传完时，停止调用
						uni.showToast({
							icon: 'none',
							title: '成功：' + success + ' 失败：' + fail
						});
					} else {
						//若图片还没有传完，则继续调用函数
						data.i = i;
						data.success = success;
						data.fail = fail;
						that.upImg(data);
					}
				}
			});
		},

		//删除图片
		deleteImageArray(index) {
			this.hotelProtocol.image.splice(index, 1);
		},

		// 预览图片
		preViewImage(type) {
			uni.previewImage({
				current: 0,
				urls: this.hotelProtocol.image
			});
		},

		// 底部导航点击-查看
		actionClick(type) {
			let that = this;
			switch (type) {
				case 'more':
					that.isSHowAfterSale = !that.isSHowAfterSale;
					break;
				case 'confirm':
					that.isSHowAfterSale = false;
					uni.navigateTo({
						url: '/pages/order/detail/detail?order_id=' + that.order_id
					});
					break;
				case 'detail':
					that.isSHowAfterSale = false;
					break;
				case 'add':
					that.mode = 'two_linkage';
					that.pickerList = that.addItemsArray;
					that.defaultIndex = [0, 0];
					that.$refs.wzpPicker.showPicker();
					break;
				default:
					break;
			}
		},

		// 提交转交
		transferSubmit() {
			let that = this;
			request.request({
				url: '/api/order.audit/transfer',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					user_id: that.transferForm.user_id
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						uni.navigateBack({});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 点击取消时清除转交人员信息
		clearTransferForm() {
			this.transferForm = {
				realname: '',
				user_id: ''
			};
		},

		//查看详情审核流程
		getConfirmList() {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditResult',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id
				},
				success(res) {
					that.confirmSteps = res.data.process;
				}
			});
		},
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditProcess',
				showLoading: true,
				token: true,
				data: Object.assign(
					{
						order_id: that.order_id
					},
					{
						audit_type: 'hotel_item'
					},
					{
						company_id: 0
					}
				),
				success(res) {
					that.sequenceData = res.data.process;
				}
			});
		},

		//提交审核
		submit() {
			let that = this;
			let params = Object.assign(
				{
					order_id: that.order_id,
					is_new: 1
				},
				{
					hotelProtocol: that.hotelProtocol
				},
				{
					addons: that.addons
				}
			);
			request.request({
				url: that.options.api,
				showLoading: true,
				token: true,
				data: params,
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 编辑提交
		editFn(api, id) {
			let that = this;
			let params = Object.assign(
				{
					order_id: that.order_id,
					order_confirm_id: that.confirm_id,
					is_new: 1
				},
				{
					hotelProtocol: that.hotelProtocol
				},
				{
					addons: that.addons
				}
			);
			request.request({
				url: api,
				showLoading: true,
				token: true,
				data: params,
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		//底部评论按钮
		resubmits(item) {
			if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
				this.commentFn(item);
			} else if (item.label == '转交') {
				uni.navigateTo({
					url: '../../../component/search/search?type=' + 'changeUser'
				});
			} else {
				this.editFn(item.api, item.id);
			}
		},
		// 编辑提交
		commentFn(e) {
			let that = this;
			let url = '';
			if (e.label == '拒绝' && that.confirmList.length == 0) {
				url = '/api/order.audit/reject';
			} else if (e.label == '同意' && that.confirmList.length == 0) {
				url = '/api/order.audit/accept';
			} else {
				url = e.api;
			}
			request.request({
				url: url,
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					content: e.content ? e.content : '',
					image: e.image ? e.image : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						that.getDetail(that.options);
						that.getConfirmList();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
uni-page-body {
	padding-top: 0;
}

@import url('../../order/createOrder/components/common.less');
@import url('../../order/components/common.less');

.protocol-container {
	padding-bottom: 120upx;

	.addPic {
		position: relative;
		overflow: hidden;
		width: 68upx;
		height: 68upx;
		border: 1px solid #cccccc;
		margin-left: 20upx;

		image {
			width: 68upx;
			height: 68upx;
			margin-right: 37upx;
		}
	}

	.operation_text {
		padding: 10upx 0;
		font-size: 24upx;
		border-bottom: 0.5px solid #dedede;
		width: 3rem;
	}

	.operation_text:last-child {
		border-bottom: none;
	}

	.right_text_top {
		padding: 14upx 38upx;
		position: fixed;
		bottom: 140upx;
		left: 40upx;
		background-color: rgba(0, 0, 0, 0.65);
		color: #fff;
		border-radius: 10upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.right_text_top:after {
		content: '';
		width: 0;
		height: 0;
		border-width: 10px;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.65) transparent transparent transparent;
		position: absolute;
		right: 38%;
		bottom: -20px;
	}

	.footer-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 16px;
		display: flex;
		align-items: center;
		height: 100upx;
		font-size: 28upx;
		background-color: #ffffff;
		border-top: 1px solid #dedede;
		z-index: 9;

		.footer-title {
			flex: 0 15%;
		}

		.footer-action-btn {
			flex: 1;
			text-align: end;

			button {
				background-color: #007aff;
				color: #ffffff;
			}

			button + button {
				margin-left: 5px;
			}
		}
	}
}
</style>
